<template>
    <div class="drop-down-search" @click.stop>
      <!--  @blur="closeDropDown" -->

      <view class="search-container">
        <input
          @focus="handleFocus" 
          class="search-input"
          type="text" 
          v-model="searchText" 
          :disabled="disabled"
          :placeholder="placeholder"/>

        <text v-if="searchText.length && clear && !disabled" @click="handleClearInput" class="clear-icon">×</text>
        <view 
          @click="handleDropDownBox" 
          v-if="icon" 
          :class="['dropdown-arrow', { rotated:  isDropDownVisible}]"
        ></view>
      </view> 

      <scroll-view 
        :scroll-y="true" 
        class="dropdown-scroll" 
        v-if="isDropDownVisible && filteredOptions.length > 0"
        :style="{ maxHeight: dropdownHeight + 'rpx' }">
        <div class="dropdown-content">
          <div v-for="(option, index) in filteredOptions" :key="index" class="option" @click="selectOption(option, $event)">
            {{ option }}
          </div>
        </div>
      </scroll-view>

    </div>
  </template>
  
  <script>
  export default {
    props: {
      options: {
        type: Array,
        default: []
      },
      value: {
        type: [String,  Number], 
        default: ''
      },
      dropdownHeight: {  // 下拉框的高度
        type: Number,
        default: 200
      },
      placeholder: {
        type: String,
        default: ''
      },
      icon: {
        type: Boolean,
        default: true
      },
      clear: {
        type: Boolean,
        default: true,
      },
      disabled: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        searchText: this.value ? this.value.toString() : '', // 修复：处理 value 为空的情况
        isDropDownVisible: false,
      };
    },
    computed: {
      // 根据搜索文本过滤选项
      filteredOptions() {
        if (!this.options || !Array.isArray(this.options)) {
          return [];
        }
        return this.options.filter(option => {
          if (!option) return false;
          const optionStr = option.toString().toLowerCase();
          const searchStr = this.searchText.toLowerCase();
          return optionStr.includes(searchStr);
        });
      }
    },
    watch: {
      // 监听外部 value 变化，同步到内部 searchText
      value: {
        handler(newVal) {
          this.searchText = newVal ? newVal.toString() : '';
        },
        immediate: true
      },
      // 监听搜索文本变化
      searchText(newVal) {
        // 向父组件发送 input 事件
        this.$emit('input', newVal);
        // 当搜索文本变化时，如果没有匹配的选项，隐藏下拉框
        if (this.filteredOptions.length === 0) {
          this.isDropDownVisible = false;
        }
      },
    },
    mounted() {
        // 添加点击外部关闭下拉框的事件监听器
        // document.addEventListener('click', this.closeDropDown.bind(this));
        
    },
    beforeDestroy() {
        // 移除事件监听器以防止内存泄漏
       // document.removeEventListener('click', this.closeDropDown.bind(this));
    },
    methods: {
      handleClearInput() { // 清除 input 输入框内容
        this.searchText = '';
        this.isDropDownVisible = false; // 清除时隐藏下拉框
        this.$emit('input', ''); // 向父组件传递选中的值
        this.$emit('changeInput', ''); // 触发 changeInput 事件
      },
      handleDropDownBox() { // 控制三角图表事件
        if (this.disabled) return;
        // 只有在有选项时才允许切换下拉框
        if (this.filteredOptions.length > 0) {
          this.isDropDownVisible = !this.isDropDownVisible;
        }
      },
      handleFocus() {
        // 只有在有匹配的选项时才显示下拉框
        if (this.filteredOptions.length > 0) {
          this.isDropDownVisible = true;
        }
      },
      // 选择选项
      selectOption(option, event) {
        if (event) {
          event.stopPropagation();
        }
        // 处理选项选择逻辑，比如触发事件、更新绑定值等
        this.searchText = option ? option.toString() : '';
        this.isDropDownVisible = false; // 隐藏下拉框
        this.$emit('input', option); // 向父组件传递选中的值
        this.$emit('changeInput', option); // 向父组件传递选中的值
      },
      closeDropDown(event) {
        // 点击事件的目标不包含搜索框或下拉框时，隐藏下拉框
        if (event && !this.$el.contains(event.target)) {
          this.isDropDownVisible = false;
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .drop-down-search {
    position: relative;
    height: 100% !important;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  }
  
  .search-container {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    /* border: 1rpx solid #e5e5e5; */
    border-radius: 8rpx;
    padding: 0 10rpx;
    padding-left: 20rpx;
    transition: all 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: solid 1rpx #e5e5e5;
    width: 100%;
    flex: 1;
    height: 70rpx;
    min-height: 70rpx;
    min-width: 200rpx; /* 确保最小宽度 */
  }
  
  .search-container:focus-within {
    border-color: #2979ff;
    border-bottom-color: #2979ff;
  }
  
  .search-input {
    flex: 1;
    height: 44rpx;
    line-height: 44rpx;
    padding: 0;
    padding-right: 80rpx; /* 为清除按钮预留空间 */
    border: none;
    outline: none;
    background: transparent;
    font-size: 28rpx;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .search-input::placeholder {
    color: #6a6a6a;
    font-size: 24rpx;
  }
  
  .search-input:disabled {
    background-color: #f5f7fa;
    color: #909399;
    cursor: not-allowed;
  }
  
  .clear-icon {
    position: absolute;
    right: 70rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0c4cc;
    font-size: 28rpx;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9); /* 添加半透明背景确保可见性 */
    border-radius: 50%;
  }
  
  .clear-icon:hover {
    color: #909399;
    background: rgba(255, 255, 255, 1);
  }
  
  .dropdown-arrow {
    position: relative;
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    flex-shrink: 0; /* 防止箭头被压缩 */
  }
  
  .dropdown-arrow::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 8rpx solid transparent;
    border-right: 8rpx solid transparent;
    border-top: 8rpx solid #999;
    transition: transform 0.3s ease;
  }
  
  .dropdown-arrow:hover::before {
    border-top-color: #2979ff;
  }
  
  .dropdown-arrow.rotated::before {
    transform: rotate(180deg);
  }
  
  .dropdown-scroll {
    position: absolute;
    top: calc(100% + 24rpx);
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    border: 1rpx solid #EBEEF5;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
    z-index: 99;
    padding: 8rpx 0;
    transition: all 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .dropdown-content {
    max-height: 400rpx;
    box-sizing: border-box;
  }
  
  .option {
    display: flex;
    cursor: pointer;
    line-height: 70rpx;
    font-size: 28rpx;
    text-align: center;
    padding: 0px 20rpx;
    color: #333;
    transition: background-color 0.2s ease;
  }
  
  .option:hover {
    background-color: #f9f9f9;
  }
  
  .option:last-child {
    border-bottom: none;
  }
  
  /* 添加滚动条样式 */
  .dropdown-scroll::-webkit-scrollbar {
    width: 6rpx;
  }
  
  .dropdown-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3rpx;
  }
  
  .dropdown-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3rpx;
  }
  
  .dropdown-scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  
  /* 响应式设计 */
  @media (max-width: 750rpx) {
    .search-input {
      font-size: 26rpx;
      padding-right: 70rpx; /* 移动端稍微减少右边距 */
    }
    
    .search-input::placeholder {
      font-size: 22rpx;
    }
    
    .option {
      font-size: 26rpx;
    }
    
    .clear-icon {
      width: 50rpx;
      height: 50rpx;
      right: 60rpx;
      font-size: 24rpx;
    }
    
    .dropdown-arrow {
      width: 36rpx;
      height: 36rpx;
    }
  }
  </style>